<template>
  <div class="kind">
      <!-- 返回 -->
      <van-icon name="revoke" size=30 @click="$router.back()"/>
      <!-- tab标签栏 -->
      <van-tabs v-model="active" @click='tabFn' sticky animated>
        <van-tab 
        v-for="item in categoryList" 
        :key='item.id'
        :title="item.name"
        >
        <!-- 分类 -->
            <div class="Goods">
                <h3>{{currentCategory.name}}</h3>
                <center>{{currentCategory.front_name}}</center>
                <ul>
                    <li v-for="item in currentCategory.subCategoryList" :key='item.id'>
                        <img v-lazy="item.wap_banner_url">
                        <p class="name">{{item.name}}</p>
                        <p class="pro">{{item.front_name}}</p>
                    </li>
                </ul>
            </div>    
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import {getPageDate,getCurrentDate} from '@/utils/http.js'
export default {
    data() {
        return {
            active: 2, //滑动的选择
            categoryList:[], //所有分类数据
            currentCategory:[], //当前分类数据
            id:'', //当前分类id
        }
    },
    created(){
        // 请求所有数据
        getPageDate().then(res=>{
        this.categoryList=res.data.categoryList
        // 获取当前分类id
        this.id=this.$route.query.id
        // 调用获取当前数据
        this.getCurrent()
      })
    },
    methods:{
        // 点击tab切换方法 - i是tab索引
        tabFn(i){
            // 获取点击的id
            this.id =this.categoryList[i].id
            // 重新请求当前数据
            this.getCurrent()
        },
        // 请求当前数据
        getCurrent(){
            getCurrentDate({id:this.id}).then(res=>{
                this.currentCategory=res.data.currentCategory
            })
        }
    }
}
</script>

<style scope lang='less'>
.Goods{
  h3{
    font-size: 24px;
    text-align: center;
    padding: 30px 0 30px;
    font-weight: 500;
    }
  center{
      font-size: 16px;
        color: rgb(151, 8, 8);
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
        width: 49%;
        margin-bottom: 10px;
        img {
        width: 100%;
        display: block;
        }
        p{
        text-align: center;
        }
        .name{
        margin-bottom: 10px;
        font-size: 1px;
        }
        .pro{
        color: rgb(128, 86, 10);
        font-weight: 500;
        font-size: 15px;
        }         
    }
  }
}
 .kind{
      .van-icon {
    position: absolute;
    top:20px;
    z-index: 10;
    display: inline-block;
    font: normal normal normal 14px/1 vant-icon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    }
 }
</style>